<template>
	<view class="my-team">
		<view class="bg-img">
			<view class="bg">
				<image class="icon" :src="avatar == '' ? '/static/img/avatar.png' : avatar" mode=""></image>
				<view class="text">
					<view class="name">{{nickname}}</view>
					
					<view class="grade">{{grade}}</view>
				</view>
			</view>
			<view class="order-item">
				<view class="order-text">
					<view class="num">{{nowdrive}}</view>
					<view class="order">服务人数</view>
				</view>
				<view class="order-text">
					<view class="num">{{price}}</view>
					<view class="order">销售业绩</view>
				</view>
				<!-- <view class="order-text">
					<view class="num">{{nowteam}}</view>
					<view class="order">团队人数</view>
				</view> -->
			</view>
		</view>

		<!-- <view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabIndex = index">{{ item.text }}</view>
		</view> -->
		<view style="margin-left: 20upx;margin-bottom: 20upx;font-size: 16px;">服务人员</view>
		<view class="center">
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(item, index) in navList" :key="index">
					<scroll-view class="list-scroll-content" :scroll-y="true" @scrolltolower="scrolltolower">
					<view class="swiper-item">
						<!-- <scroll-view class="list-scroll-content" scroll-y="true"> -->
						<!-- <view style="height: 112upx;"></view> -->
						<view class="consume-item" v-for="(item, index) in lists" :key="index">
							<!-- <view v-if="item.length == 0"> -->
								<view class="item-left">
									<image style="width: 76upx;height: 76upx;margin-right: 20upx;" :src="item.avatar" mode=""></image>
									<view class="consume-left">
										<view class="item-text">
											<view class="number">昵称：{{ item.nickname }}</view>
											<!-- <view class="tag">{{ item.level_name }}</view> -->
										</view>
										<view class="time">注册时间：{{ item.create_at }}</view>
										<view class="time">个人业绩：{{ item.team_performance }}</view>
									</view>
								</view>
								<!-- <view class="price">{{ item.order }}订单</view> -->
							<!-- </view> -->
						</view>
						<view class="not-data" v-if="lists.length==0">
							暂无数据
						</view>
					</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			avatar:'',
			nickname:'',
			level_name:'',
			nowdrive:0,
			nowteam:0,
			tabIndex: 0,
			num: '',
			lists: [],
			page:1,
			limit:1000,
			show:true,
			grade:'',
			price:0,
			navList: [
				{
					text: '直推',
					state: '0',
					type: 1
				},
				// {
				// 	text: '间推',
				// 	state: '1',
				// 	type: 2
				// }
			]
		};
	},
	onLoad: function() {
		let self=this
		self.getUserInfo();
		self.getDetails();
		self.getAgent()
		self.getAchievement()
	},
	methods: {
		getAgent() {
			var self = this;
			self.$http.get(service.api.user.getAgent, {}).then(function(res) {
				console.log(res, 111);
				var list = res.data;
				self.grade = list.levelname;
			});
		},
		getAchievement() {
			var self = this;
			self.$http.get(service.api.user.getAchievement, {
				season:'all_performance'
			}).then(function(res) {
				console.log(res, 111);
				var list = res.data;
				self.price = list.order_price;
			});
		},
		scrolltolower(e) {
			// console.log('滚动到底部==>>', e);
			let self=this
			if(self.show==false){
				return
			}else{
				this.getDetails();
			}
		},
		getDetails(){
			var self = this;
			self.$http.get(service.api.user.subordinate, {
				layer: self.navList[self.tabIndex].type,
				page:self.page,
				limit:self.limit
			})
			.then(function(res) {
				res = res.data;
				self.nowdrive = res.count;
				self.nowteam = res.team_count;
				self.lists = res.list;
				console.log(self.lists,2345);
				if(self.lists.length<self.limit){
					self.show=false
				}else{
					self.page+=1
				}
			});
		},
		getUserInfo() {
			var self = this;
			self.$http.post(service.api.user.info, {}).then(function(res) {
				res = res.data;
				self.avatar = res.avatar;
				self.level_name = res.level_name;
				self.nickname = res.nickname;
				self.mobile = res.account;
			});
		},
		changeTab(e) {
			this.tabClick(e.target.current);
		},
		//顶部tab点击
		tabClick(index) {
			this.page=1
			this.change(index);
			this.getDetails();
		},
		change(type) {
			this.tabIndex = type;
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-img {
	position: relative;
	width: 100%;
	height: 350upx;
	background: url(../../static/img/team2.png) no-repeat;
	background-size: 100% 100%;
	border-bottom: 2upx solid #F4F4F4;
}
.bg {
	display: flex;
	padding: 20upx 30upx 0;
}
.icon {
	width: 105upx;
	height: 105upx;
	border-radius: 54upx;
	margin: 25upx 20upx 0 25upx;
}
.centers{
	margin: 0 0upx;
	padding: 20upx;
	height: 50upx;
	font-size: 34upx;
	font-weight: bold;
	background: #FFFFFF;
	border-bottom: 2upx solid #f4f4f4;
}
.text {
	width: calc(100% - 170upx);
	margin-left: 20upx;
	margin-top: 30upx;
}
.name {
	font-weight: bold;
	color: #fff;
	font-size: 30upx;
	text{
		margin-left: 30upx;
		height: 50upx;
		font-size: 26upx;
		padding: 4upx 20upx;
		line-height: 50upx;
		background: #ffc000;
		border-radius: 26upx;
	}
}
.grade {
	color: #FFFFFF;
	font-size: 26upx;
}
.order-item {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.order-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #fff;
	margin-top: 30upx;
}
.num {
	font-size: 36upx;
	font-weight: bold;
}
.order {
	font-size: 24upx;
}
.consume-item:nth-last-child(1) {
	border-bottom: none;
}
.consume-item {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 28upx 22upx 22upx;
	border-bottom: 1px solid #f4f4f4;
	margin: 0 20upx;
	border-radius: 10upx;
}
.item-left {
	display: flex;
	align-items: center;
}
.item-text {
	display: flex;
	align-items: center;
}
.number {
	font-size: 26upx;
	color: #666;
}
.tag {
	border: 1px solid #ffb463;
	border-radius: 17upx;
	// width: 86upx;
	height: 34upx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffaf62;
	font-size: 22upx;
	margin-left: 20upx;
	padding: 10upx;
}
.time {
	color: #999;
	font-size: 24upx;
	font-weight: 500;
}
.price {
	display: flex;
	align-items: center;
	color: #333;
	font-size: 26upx;
}
.money {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: #f81149;
}
.navbar {
	width: 50%;
	margin-left: 200upx;
	background-color: #f3f3f3;
	display: flex;
	// height: 56px;
	// padding: 0 5px;
	justify-content: center;
	// box-shadow: 0px 4upx 8upx #dcdfe6;
	position: relative;
	// width: 100%;
	z-index: 200;
	padding-bottom: 28upx;
	// height: 112upx;
	// width: 100upx;
	.nav-item {
		// width: 50%;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: #303133;
		position: relative;
		border-radius: 28upx;
		margin: 0 80upx;
		&.current {
			color: #fff;
			// background: linear-gradient(90deg, rgba(233, 144, 64, 1), rgba(255, 127, 77, 1));
			background: #f81149;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 50px;
				height: 0;
				/* border-bottom: 2px solid #fa436a; */
				// border-bottom: 2px solid #f81149;
			}
		}
	}
}
.center {
	width: 100%;
	height: 100%;
	z-index: 120;
	// padding-top: 80upx;
	position: absolute;
}
.swiper-box {
	height: 100%;
}
.list-scroll-content {
	height: 100%;
}
.not-data{
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
